<template>
  <div class="water_box">
    <!-- 水务二科 -->
    <section class="content">
      <div class="model_title">t4环安能耗-水务科</div>
      <div class="echart_card">
        <div class="card_title">水务运营指标趋势</div>
        <div class="echarts_data">
          <vechart :options="waterIndexData" />
        </div>
      </div>
      <div class="echart_card">
        <div class="card_title">水单耗趋势</div>
        <div class="echarts_data">
          <vechart :options="waterConsumeData" />
        </div>
      </div>

      <div class="echart_card">
        <div class="card_title">总排口指标浓度趋势</div>
        <div class="echarts_data">
          <vechart :options="waterConcentrationData" />
        </div>
      </div>
      <div class="echart_card">
        <p>
          本期内水务二科运转正常，共发生一级报警{{
            waterList[0].allNum
          }}次，已处理{{ waterList[0].endNum }}次，处理率{{
            waterList[0].value
          }}%。
        </p>
        <div class="card_title table_title">水务科FMCS本期一级报警记录</div>
        <div class="echarts_data1 table_data">
          <mytable :mydata="tableData"></mytable>
        </div>
      </div>
      <div class="model_title">t4环安能耗-气化科</div>
      <div class="echart_card">
        <div class="card_title table_title">历史耗气量(手动录入)</div>
        <div class="echarts_data">
          <vechart :options="Gasconsumptiondvechart" />
        </div>
      </div>
      <div class="echart_card">
        <div class="card_title table_title">智能化平台各系统访问次数</div>
        <div class="echarts_data">
          <vechart :options="visitsnumfun" />
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import apis from "@/api/api.js";
import waterlineOption from "../jsonmodule/waterjson/waterlineOption.json";
import waterIndex from "../jsonmodule/waterjson/waterIndex.json";
import waterConsume from "../jsonmodule/waterjson/waterConsume.json";
import waterConcentration from "../jsonmodule/waterjson/waterConcentration.json";
import gasconsuvechart from "../jsonmodule/waterjson/gasconsuvechart.json";
import visitsnum from "../jsonmodule/waterjson/visitsnum.json";
export default {
  components: {
    vechart: () => import("@components/charts/Vechart.vue"),
    mytable: () => import("../common/Mytable.vue"),
  },
  data() {
    return {
      waterList: JSON.parse(localStorage.getItem("waterList")),
      tableData: [], //传给公共表格组件的数据
      waterlineOption: waterlineOption, //水务运营指标趋势配置文件
      waterIndex: waterIndex,
      waterConsume: waterConsume, //水单耗
      waterConcentration: waterConcentration, //总排口指标浓度趋势
      areaStandard: 66, //标准值
      waterOperateObj: {}, //水务运营趋势
      waterConcentrationObj: {}, //总排口指标浓度趋势数据
      waterConsumeObj: {}, //水单耗趋势
      Purewater: [],
      Pcw: [],
      Wastewater: [],
      Time: [],
      //气
      gasconsuvechart: gasconsuvechart,
      Gasconsumptiondata: {},
      //访问次数
      visitsnum: visitsnum,
      visitsnumdata: {},
    };
  },
  created() {
    this.initData();
  },
  methods: {
    fmcsTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    async initData() {
      //水务运营指标趋势
      const waterAffairsTrendData =
        await apis.waterAffairsTrendOperationalIndicators();
      this.waterOperateObj = waterAffairsTrendData.data.content;
      // console.log(this.waterOperateObj, "水务运营指标趋势");

      //水单耗趋势
      const queryWaterHourData = await apis.queryWaterHour();
      this.waterConsumeObj = queryWaterHourData.data.content;
      console.log(this.waterConsumeObj, "水单耗趋势");

      //总排口浓度指标趋势

      const totalOutletConcentrationTrendData =
        await apis.totalOutletConcentrationTrend();
      this.waterConcentrationObj =
        totalOutletConcentrationTrendData.data.content;
      // console.log(this.waterConcentrationObj, "总排口浓度指标趋势");

      //FMCS报警记录
      const WaterfmcsAlarmRecordData = await apis.fmcsAlarmRecord();
      this.tableData = WaterfmcsAlarmRecordData.data.content.waterList;
      // console.log(this.tableData, "水位-FMCS报警记录");

      //耗气量
      const Gasconsumption = await apis.qidataweek();
      this.Gasconsumptiondata = Gasconsumption.data.content;
      // console.log(this.Gasconsumptiondata, "历史气体1");
      //次数
      const AccessTimes = await apis.queryAccessTimes();
      this.visitsnumdata = AccessTimes.data.content;
      console.log(AccessTimes, "访问次数");
    },
  },
  computed: {
    //水务运营指标趋势数据
    waterIndexData() {
      // return this.waterIndex;
      if (
        this.waterOperateObj &&
        this.waterOperateObj.date &&
        this.waterOperateObj.date.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("hh时");
        };

        return {
          ...this.waterIndex,
          xAxis: {
            ...this.waterIndex.xAxis,
            axisLabel: {
              ...this.waterIndex.xAxis.axisLabel,
              // formatter: formatter
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: this.waterOperateObj.date,
          },
          yAxis: [
            {
              type: "value",
              name: "水量(吨)",
              min: 0,
              max: 80000,
              interval: 20000,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "回收率(%)",
              min: 0,
              max: 800,
              interval: 200,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              ...this.waterIndex.series[0],
              data: this.waterOperateObj.value[0],
            },
            {
              ...this.waterIndex.series[1],
              data: this.waterOperateObj.value[2],
            },
            {
              ...this.waterIndex.series[2],
              data: this.waterOperateObj.value[3],
            },
            {
              ...this.waterIndex.series[3],
              data: this.waterOperateObj.value[1],
            },
          ],
        };
      } else {
        return this.waterIndex;
      }
    },
    //水单耗
    waterConsumeData() {
      // return this.waterConsume;

      if (
        this.waterConsumeObj &&
        this.waterConsumeObj.time &&
        this.waterConsumeObj.time.length
      ) {
        // const formatter = function(value, index) {
        //   return new Date(Date.parse(value)).switch("hh时");
        // };

        return {
          ...this.waterConsume,
          xAxis: {
            ...this.waterConsume.xAxis,
            // axisLabel: {
            //   ...this.waterConcentration.xAxis.axisLabel
            //   // formatter: formatter
            // },
            data: this.waterConsumeObj.time,
          },
          series: [
            {
              ...this.waterConsume.series[0],
              data: this.waterConsumeObj.Purewater,
            },
            {
              ...this.waterConsume.series[1],
              data: this.waterConsumeObj.Pcw,
            },
            {
              ...this.waterConsume.series[2],
              data: this.waterConsumeObj.Wastewater,
            },
          ],
        };
      } else {
        return this.waterConsume;
      }
    },
    //总排口指标浓度趋势
    waterConcentrationData() {
      // return this.waterConcentration;
      if (
        this.waterConcentrationObj &&
        this.waterConcentrationObj.time &&
        this.waterConcentrationObj.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("hh时");
        };

        return {
          ...this.waterConcentration,
          xAxis: {
            ...this.waterConcentration.xAxis,
            axisLabel: {
              ...this.waterConcentration.xAxis.axisLabel,
              // formatter: formatter
            },
            data: this.waterConcentrationObj.time,
          },
          series: [
            {
              ...this.waterConcentration.series[0],
              data: this.waterConcentrationObj.value["TP"],
            },
            {
              ...this.waterConcentration.series[1],
              data: this.waterConcentrationObj.value["NH3-N"],
            },
            {
              ...this.waterConcentration.series[2],
              data: this.waterConcentrationObj.value.COD,
            },
            {
              ...this.waterConcentration.series[3],
              data: this.waterConcentrationObj.value.SS,
            },
            {
              ...this.waterConcentration.series[4],
              data: this.waterConcentrationObj.value.TF,
            },
            {
              ...this.waterConcentration.series[5],
              data: this.waterConcentrationObj.value.PH,
            },
          ],
        };
      } else {
        return this.waterConcentration;
      }
    },
    Gasconsumptiondvechart() {
      if (
        this.Gasconsumptiondata &&
        this.Gasconsumptiondata.time &&
        this.Gasconsumptiondata.time.length
      ) {
        // console.log(this.Gasconsumptiondata, "历史气体2");
        return {
          ...this.gasconsuvechart,
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.Gasconsumptiondata.time,
          },
          series: [
            {
              name: "t4耗气量",
              type: "line",
              stack: "总量",
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255,160,223,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,160,223,0)",
                    },
                  ],
                },
              },
              emphasis: {
                focus: "series",
              },
              data: this.Gasconsumptiondata.value,
            },
          ],
        };
      } else {
        return this.gasconsuvechart;
      }
    },
    visitsnumfun() {
      if (this.visitsnumdata && this.visitsnumdata.name) {
        return {
          ...this.visitsnum,
          xAxis: {
            type: "category",
            axisLabel: {
              interval: 0,
              rotate: 45,
            },
            data: this.visitsnumdata.name,
          },

          series: [
            {
              name: "次数",
              data: this.visitsnumdata.value,
              type: "bar",
              barWidth: "30%",
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "top", //在上方显示
                    textStyle: {
                      //数值样式
                      color: "black",
                      fontSize: 16,
                    },
                  },
                },
              },
            },
          ],
        };
      } else {
      }
      return this.visitsnum;
    },
  },
};
</script>
<style lang="scss" scoped>
.water_box {
  // height: 666px;
  // background-color: #bbb;
  .content {
    margin: 0 auto;
    width: 1280px;
    background-color: #eee;
    .model_title {
      width: 100%;
      height: 88px;
      background: url("../../../../../assets/report/ectitle.jpg") no-repeat
        center;
      background-size: cover;
      text-align: center;
      line-height: 88px;
      font-size: 42px;
      font-weight: bold;
      color: #000000;
    }
    .echart_card {
      width: 100%;
      padding: 2% 4.5%;
      .card_title {
        height: 70px;
        width: 100%;
        line-height: 70px;
        padding-left: 48px;
        font-size: 30px;
        background: #5ea9fd;
        border-radius: 15px 15px 0px 0px;
        font-weight: bold;
        color: #ffffff;
      }
      .table_title {
        background: #3fc4eb;
      }
      .echarts_data {
        width: 100%;
        height: 400px;
        background: #ffffff;
        border-radius: 0px 0px 15px 15px;
      }
      .table_data {
        padding-top: 22px;
      }
      .cc_data {
        border-radius: 0px 0px 15px 15px;
        width: 100%;
        background: #ffffff;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
        font-weight: bold;
        color: #333333;
      }
      p {
        color: #000000;
        font-size: 24px;
      }
    }
  }
}
</style>
